<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高德地图</title>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "",
    };
  </script>
  <script src="https://webapi.amap.com/loader.js"></script>

  <style>
    #amap-container {
      width: 90vw;
      height: 90vh;
      max-width: 1rem auto;
    }
  </style>
</head>

<body>
  <h1>高德地图原生演示</h1>
  <div id="amap-container"></div>

  <script>
    AMapLoader.load({
      key: "e01499dbab923bc5913783dde252868b", //申请好的 Web 端开发 Key，首次调用 load 时必填
      version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
      AMapUI: {
        //是否加载 AMapUI，缺省不加载
        version: "1.1", //AMapUI 版本
        plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
      },
      Loca: {
        //是否加载 Loca， 缺省不加载
        version: "2.0", //Loca 版本
      },
    })
      .then((AMap) => {
        var map = new AMap.Map("amap-container"); //"container"为 <div> 容器的 id
        map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
      })
      .catch((e) => {
        console.error(e); //加载错误提示
      });

  </script>


</body>

</html>